<template>
	<div class='wy-main car-info'>
		<a-row class="wy-main-title" v-if='!type'>
			<a-col :span="24">
				<p class="title-p">
					<a-divider class="title-vertical" type="vertical" />
					<span class="title-span">新增驾驶员</span>
					<a-divider class="title-divider" />
				</p>
			</a-col>
		</a-row>
		<a-form :form="form" @submit="handleSubmit" class="wy-form" >
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="驾驶员姓名">
				<a-input v-decorator="[ 'driverName', {rules: [{ required: true, message: '请输入驾驶员姓名!'}]}]" placeholder='请输入驾驶员姓名' />
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="证件类型">
				<a-select  v-decorator="[ 'certificatesType', {rules: [{ required: true, message: '请选择证件类型!' }]} ]" placeholder="请选择证件类型">
					<a-select-option value="0">
						身份证
					</a-select-option>
					<a-select-option value="1">
						护照
					</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="证件号">
				<a-input v-decorator="[ 'certificatesNo', {rules: [{ required: true, message: '证件号不能为空!' }]}]" placeholder='请输入证件号' />
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="手机号">
				<a-input v-decorator="[ 'mobile', {rules: [{ required: true, message: '手机号不能为空!'},{validator: checkMobile}]}]" placeholder='请输入手机号' />
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="居住地址">
				<a-input v-decorator="[ 'address', {rules: [{ required: true, message: '居住地址不能为空!' }]}]" placeholder='请选择居住地址' />
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="详细地址">
				<a-input v-decorator="[ 'detailAddress', {rules: [{ required: true, message: '请选择出发地!' }]}]" placeholder='请选择详细地址' />
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="电子邮箱">
				<a-input v-decorator="[ 'email',{rules: [{validator: checkMail}]}]" placeholder='请输入电子邮箱' />
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="QQ">
				<a-input v-decorator="[ 'qq']" placeholder='请输入您的QQ' />
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="驾驶员认证图片" class="upzjimg" v-if="type == 'info'">
				<div class="up_img">
					<img  v-if="Driver_img" :src="Driver_img" alt="avatar" />
				</div>
				<div class="up_img">
					<img  v-if="Positive_img" :src="Positive_img" alt="avatar" />
				</div>
				<div class="up_img">
					<img  v-if="Back_img" :src="Back_img" alt="avatar" />
				</div>
				<div class="up_img">
					<img  v-if="Qualifications_img" :src="Qualifications_img" alt="avatar" />
				</div>
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="驾驶员认证图片" class="upzjimg" v-if="type != 'info'">
				<a-form-item class="up_img">
					<a-upload v-decorator="[ 'upload1',{rules: [{ required: true, message: '请上传驾驶员照片 !' }]}]" name="file" listType="picture-card"  class="avatar-uploader" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Driver_Change">
						<div class="img_zz" v-if="Driver_img">
							<div class="img_zz_text" >
								<a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
								<div class="ant-upload-text" style="margin-top: 10px;">
									<span style="color: red;"></span>
								</div>
							</div>
							<div class="img_zz_d"></div>
						</div>
						<img  v-if="Driver_img" :src="Driver_img" alt="avatar" />
						<div class="up_img_d" v-if="!Driver_img">
							<a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
							<div class="ant-upload-text" style="margin-top: 10px;">
								 <span style="color: red;">*必填：</span>驾驶员正面照 
							</div>
						</div>
					</a-upload>
				</a-form-item>
				<a-form-item class="up_img">
					<a-upload v-decorator="[ 'upload2',{rules: [{ required: true, message: '请上传身份证正面照 !' }]}]" name="file" listType="picture-card"  class="avatar-uploader" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Positive_Change">
						<div class="img_zz" v-if="Positive_img">
							<div class="img_zz_text" >
								<a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
								<div class="ant-upload-text" style="margin-top: 10px;">
									 <span style="color: red;"></span>
								</div>
							</div>
							<div class="img_zz_d"></div>
						</div>
						<img  v-if="Positive_img" :src="Positive_img" alt="avatar" />
						<div class="up_img_d" v-if="!Positive_img">
							<a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
							<div class="ant-upload-text" style="margin-top: 10px;">
								 <span style="color: red;">*必填：</span>身份证<span style="color: red;">正面</span>照  
							</div>
						</div>
					</a-upload>
				</a-form-item>
				<a-form-item class="up_img">
					<a-upload v-decorator="[ 'upload3',{rules: [{ required: true, message: '请上传身份证背面照 !' }]}]"  name="file" listType="picture-card"  class="avatar-uploader" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Back_Change">
						<div class="img_zz" v-if="Back_img">
							<div class="img_zz_text" >
								<a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
								<div class="ant-upload-text" style="margin-top: 10px;">
									 <span style="color: red;"></span> 
								</div>
							</div>
							<div class="img_zz_d"></div>
						</div>
						<img  v-if="Back_img" :src="Back_img" alt="avatar" />
						<div class="up_img_d" v-if="!Back_img">
							<a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
							<div class="ant-upload-text" style="margin-top: 10px;">
								 <span style="color: red;">*必填：</span>身份证<span style="color: red;">背面</span>照 
							</div>
						</div>
					</a-upload>
				</a-form-item>
				<a-form-item class="up_img">
					<a-upload v-decorator="[ 'upload4',{rules: [{ required: true, message: '请上传道路运输从业资格证 !' }]}]"  name="file" listType="picture-card"  class="avatar-uploader" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Qualifications_Change">
						<div class="img_zz" v-if="Qualifications_img">
							<div class="img_zz_text" >
								<a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
								<div class="ant-upload-text" style="margin-top: 10px;">
									 <span style="color: red;"></span> 
								</div>
							</div>
							<div class="img_zz_d"></div>
						</div>
						<img  v-if="Qualifications_img" :src="Qualifications_img" alt="avatar" />
						<div class="up_img_d" v-if="!Qualifications_img">
							<a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
							<div class="ant-upload-text" style="margin-top: 10px;">
								 道路运输从业资格证 
							</div>
						</div>
					</a-upload>
				</a-form-item>
			</a-form-item>
			<a-row style="margin-top: 10px;">
				<a-col :span="24">
					<p style="margin: 0;">
						<a-divider style="width: 95%;margin-left: 20px;" />
					</p>
				</a-col>
			</a-row>
				<div class="ant-row ant-form-item"  v-if='type!="info"'>
				<div class="ant-col-4 ant-form-item-label"></div>
				<div class="ant-col-20 ant-form-item-control-wrapper">
					<div class="ant-form-item-control">
						<div class="ant-title">
							<span class="title-span" style="margin-left:-50px; font-size:16px; font-weight:700; ">审核意见</span>
						</div>
					   <div class="ant-radio">
						<a-radio-group v-model="value">
					    <a-radio :value="120">
					    通过
					    </a-radio>
					    <a-radio :value="121">
					    拒绝
					    </a-radio>
			   	 </a-radio-group>
					 </div>
					 <div class="a-textarea">
						 <a-textarea placeholder="审核意见" v-model="authenticationRemarks" style="margin-top: 10px; width: 447px;height:173px;" :rows="4" />
					 </div>
					</div>
				</div>
			</div>
			<div class="ant-row ant-form-item" v-if='type!="info"'>
				<div class="ant-col-4 ant-form-item-label"></div>
				<div class="ant-col-10 ant-form-item-control-wrapper">
					<div class="ant-form-item-control">
						<span class="ant-form-item-children">
							
							<a-button type="primary"  html-type="submit" >
								{{type == 'edit' ? '提交':'提交'}}
							</a-button>
              
						</span>
					</div>
				</div>
			</div>
			
		</a-form>
	</div>
</template>
<script>
	import { mapState } from 'vuex'
	import { environment } from '@/environments/environment'
	import {checkTel, checkTelNum, checkEmail} from 'utils/formValidate'
	export default {
		components: {
		},
		props:['datail','type'],
		data() {
			return {
				agreement:false,
				value:120,
				authenticationRemarks:'',
				uploadUrl: environment.FileUploadUrl+'/fileupload/upload',// 图片上传地址
				 FileUploadUrl2:environment.FileUploadUrl2,
				Driver_img:'',// 驾驶员正面照片
				Positive_img:'',// 身份证正面照片
				Back_img:'',// 身份证背面照片
				Qualifications_img:'',// 道路运输从业资格证照片
				certificatesPics :'',// 道路运输从业资格证 
				certificatesPicsPath :'',// 道路运输从业资格证目录 
				driverPics :'',// 驾驶员照片
				driverPicsPath:'',// 驾驶员照片目录 
				idcardBackPics :'',// 身份证反面
				idcardBackPicsPath :'',// 身份证反面存放目录 
				idcardJustPics :'',//  身份证正面 
				idcardJustPicsPath :'',// 身份证正面存放目录
				loading: false,
				imageUrl: '',
				formItemLayout: {
					labelCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 4
						},
					},
					wrapperCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 10
						},
					},
				},
			}
		},
		beforeCreate() {
			this.form = this.$form.createForm(this);
		},
		created() {
			console.log(this.datail,'datail')
			console.log(this.type,'type')
			
			if(this.datail){

				let datail = this.datail

				if(datail.authenticationStatus==120){
					this.value = 121;
				}else{
					this.value = 120;
				}

				this.authenticationRemarks = datail.authenticationRemarks;
				setTimeout(()=>{
					this.form.setFieldsValue({
						address:datail.address,
						certificatesNo:datail.certificatesNo,
						certificatesType:datail.certificatesType,
						detailAddress:datail.detailAddress,
						driverName:datail.driverName,
						email:datail.email,
						mobile:datail.mobile,
						approvalStatus:datail.approvalStatus,
						qq:datail.qq
						
					});
		        },0)
				
				this.certificatesPics  = datail.certificatesPics// 道路运输从业资格证 
				this.certificatesPicsPath  = datail.certificatesPicsPath// 道路运输从业资格证目录 
				this.driverPics  = datail.driverPics// 驾驶员照片
				this.driverPicsPath = datail.driverPicsPath// 驾驶员照片目录 
				this.idcardBackPics  = datail.idcardBackPics// 身份证反面
				this.idcardBackPicsPath  = datail.idcardBackPicsPath// 身份证反面存放目录 
				this.idcardJustPics  = datail.idcardJustPics//  身份证正面 
				this.idcardJustPicsPath  = datail.idcardJustPicsPath// 身份证正面存放目录
				
				if(this.driverPicsPath){
						this.Driver_img = this.FileUploadUrl2+this.driverPicsPath+this.driverPics// 驾驶员正面照片
						setTimeout(() => {
              this.form.setFieldsValue({
              upload1:true
              });
            }, 100);
				}
				if(this.idcardJustPicsPath){
					this.Positive_img = this.FileUploadUrl2+this.idcardJustPicsPath+this.idcardJustPics// 身份证正面照片
						setTimeout(() => {
              this.form.setFieldsValue({
              upload2:true
              });
            }, 100);
				}
				if(this.idcardBackPicsPath){
						this.Back_img = this.FileUploadUrl2+this.idcardBackPicsPath+this.idcardBackPics// 身份证背面照片
							setTimeout(() => {
              this.form.setFieldsValue({
              upload3:true
              });
            }, 100);
				}
				if(this.certificatesPicsPath){
					this.Qualifications_img = this.FileUploadUrl2+this.certificatesPicsPath+this.certificatesPics// 道路运输从业资格证照片
					setTimeout(() => {
              this.form.setFieldsValue({
              upload4:true
              });
            }, 100);
				}
				
			}
		},
		watch: {},

		mounted: function() {

		},
		methods: {
			
			// 校验手机号
			checkMobile:checkTel,
			// 校验邮箱
			checkMail:checkEmail,
			// 上传驾驶员正面照片
			Driver_Change(info){
				console.log(info,9889)
				if(info.file.status === 'uploading') {
					this.loading = true
					return
				}
				if(info.file.status === 'done') {
					this.Driver_img = this.FileUploadUrl2+info.file.response.data.certifJpgFile
					this.driverPics = info.file.response.data.certificatesjpg// 驾驶员照片
					this.driverPicsPath= info.file.response.data.certificatesPath// 驾驶员照片目录 
					this.loading = false
				}
			},
			// 身份证正面照
			Positive_Change(info){
				console.log(info,9889)
				if(info.file.status === 'uploading') {
					this.loading = true
					return
				}
				if(info.file.status === 'done') {
					this.Positive_img = this.FileUploadUrl2+info.file.response.data.certifJpgFile
					this.idcardJustPics = info.file.response.data.certificatesjpg//  身份证正面 
					this.idcardJustPicsPath = info.file.response.data.certificatesPath// 身份证正面存放目录
					this.loading = false
				}
			},
			// 上传身份证背面
			Back_Change(info){
				console.log(info,9889)
				if(info.file.status === 'uploading') {
					this.loading = true
					return
				}
				if(info.file.status === 'done') {
					this.Back_img = this.FileUploadUrl2+info.file.response.data.certifJpgFile
					this.idcardBackPics = info.file.response.data.certificatesjpg// 身份证反面
					this.idcardBackPicsPath = info.file.response.data.certificatesPath// 身份证反面存放目录 
					this.loading = false
				}
			},
			// 上传运输资格证照片
			Qualifications_Change(info){
				console.log(info,9889)
				if(info.file.status === 'uploading') {
					this.loading = true
					return
				}
				if(info.file.status === 'done') {
					this.Qualifications_img = this.FileUploadUrl2+info.file.response.data.certifJpgFile
					this.certificatesPics = info.file.response.data.certificatesjpg// 道路运输从业资格证 
					this.certificatesPicsPath = info.file.response.data.certificatesPath// 道路运输从业资格证目录
					this.loading = false
				}
			},
			// 上传证件
			beforeUpload(file) {
				console.log(file.type)
				const isJPG = file.type === 'image/jpeg' || 'image/png'
				if(!isJPG) {
					this.$message.error('You can only upload JPG file!')
				}
				const isLt2M = file.size / 1024 / 1024 < 2
				if(!isLt2M) {
					this.$message.error('Image must smaller than 2MB!')
				}
				return isJPG && isLt2M
			},
			// 上传前事件
			handleChange(info) {
				if(info.file.status === 'uploading') {
					this.loading = true
					return
				}
				if(info.file.status === 'done') {
					// Get this url from response in real world.
					getBase64(info.file.originFileObj, (imageUrl) => {
						this.imageUrl = imageUrl
						this.loading = false
					})
				}
			},
			// 认证提交
			handleSubmit(e) {
				e.preventDefault();
				this.form.validateFieldsAndScroll((err, values) => {
						console.log('Received values of form: ', values);
					
					if(!err) {
						values.userId = this.user.userId
						values.certificatesPics = this.certificatesPics// 道路运输从业资格证 
						values.certificatesPicsPath = this.certificatesPicsPath// 道路运输从业资格证目录 
						values.driverPics = this.driverPics// 驾驶员照片
						values.driverPicsPath= this.driverPicsPath// 驾驶员照片目录 
						values.idcardBackPics = this.idcardBackPics// 身份证反面
						values.idcardBackPicsPath = this.idcardBackPicsPath// 身份证反面存放目录 
						values.idcardJustPics = this.idcardJustPics//  身份证正面 
						values.idcardJustPicsPath = this.idcardJustPicsPath// 身份证正面存放目录

						values.authenticationStatus = this.value;
						values.authenticationRemarks = this.authenticationRemarks;
						console.log('Received values of form: ', values);
						if (this.type === 'edit') {
							this.editSubmit(values)
						}else{
							this.addSubmit(values)
						}
					}
				});
			},
			// 添加保存数据
			addSubmit(values){
				this.$post('info/infoDriver', values,true).then((r) => {
					console.log(r,8989)
					if(r.status == 200){
						this.$message.success(r.data.message)
						this.form.resetFields();
					}
					this.loading = false;
				}).catch((e) => {
					console.log(e)
					this.$message.error(e)
					this.loading = false;
				})
			},
			// 编辑修改数据
			editSubmit(values){
				values.driverId = this.datail.driverId;
				this.$put('info/infoDriver', values,true).then((r) => {
					console.log(r,8989)
					console.log(this.datail.approvalStatus )
					if(r.status == 200){
						// this.$message.success(r.data.message)
						this.$emit('close');
					}
				}).catch((e) => {
					console.log(e)
					this.$message.error(e)
				})
			},
			callback(key) {
				console.log(key)
			}
		},
		computed: {
			...mapState({
				multipage: state => state.setting.multipage,
				user: state => state.account.user,
			}),
		},
	}
</script>

<style lang="less" scoped>
	.car-info {
		.upzjimg{
			.up_img{
				float: left;
				position: relative;
				margin-right: 10px;
				margin-bottom: 10px;
				img{
					width: 200px;
					height: 200px;
				}
				.up_img_d{
					width: 200px;
					height: 200px;
					padding-top: 55px; 
				}
				.img_zz{
					width: 200px;
					height: 200px; 
					position: absolute; 
					color: #fff;
					border: 1px solid;
					.img_zz_text{
						width: 100%;
						text-align: center;
						position: absolute;
						z-index: 10;
						padding-top: 55px; 
					}
					.img_zz_d{
						position: absolute;
						width: 200px ;
						height:200px;
						background: #000;
						opacity:0.6;
					}
				}
			}
		}
	}
</style>